<template>
	<div class="import_wrap">
		<ul>
			<li class="export" v-on:click='exportFile()'>
				<img src="../img/export.png" />
				<span class="bulespan">{{$t('common.exportExcel')}}</span>
			</li>
			<li class="import" v-on:click='importFile()'>
				<img src="../img/import.png" />
				<span class="bulespan">{{$t('common.importExcel')}}</span>
			</li>
			<li style="position: relative;">
				<input type="text" class="styleinput" :placeholder="$t('common.importPlaceHold')"/>
				<label for="flieinput" class="button button--aylen" style="padding:2px 8px;font-weight: 500;">{{$t('common.importBtn')}}</label>
				<input type="file" id='flieinput' class="flieinput" v-on:change='getNewfile()'  data-container="body" data-placement="bottom" :data-content="$t('common.noFileNotice')" />
			</li>
			<li v-if="type=='selfset'">
				<input type="checkbox" class="iscover" style="margin-left: 10px;" />
				<span style="margin:0 5px 0 3px;">{{$t('common.importNote')}}</span>
				<!-- <span style="color: #E2E2E2;">{{$t('common.importRemark')}}</span> -->
			</li>
			<li v-if="type=='hostap'">
				<label >{{$t('common.accessLabel')}}</label>		
				<div class="on_off_but">							
					<button @click.stop = "changeStatus(1)" :class="[filter_switch?'btn-active':'']" class="on_but">{{$t('common.enabled')}}</button>
					<button @click.stop = "changeStatus(0)" :class="[filter_switch?'':'btn-active']" class="off_but">{{$t('common.disabled')}}</button>
				</div>
				<span v-if="show" style="color: #E2E2E2;">{{filter_switch?$t('common.Disabling'):$t('common.Enabling')}}</span>
			</li>
		</ul>
		<Modals :id="'import'" :title="title" :status="status" :errorMsg="errorMsg" 
		 :type = "$t('common.import')" @modalEvent="getFileData">
			<p slot="modal_content" style="font-size: 16px;">{{$t('common.importSure')}}{{this.iscover?$t('common.coverSure'):''}}?</p>
		</Modals>
	</div>
</template>
<script>
import Modals from "components/common/Modals";
import defendService from "services/defendService";
export default {
  props: {
    type: {
      type: String
    },
    title: {
      type: String
    },
    switch_btn: {
      type: String
    }
  },
  components: {
    Modals
  },
  data() {
    return {
      status: "",
      iscover: "",
      formData: "",
      errorMsg: "",
      filter_switch: false,
      show: false
    };
  },
  watch: {
    switch_btn: function() {
      this.filter_switch = this.switch_btn === "1" ? true : false;
    }
  },
  methods: {
    exportFile() {
      let url = ""
      switch (this.type) {
        case 'hostap':
          url = "/safe/export?t=6";
          break;
        case 'selfset':
          url = "/safe/export?t=3";
          break;
        case 'trunk':
          url = "/netmgmt/export?t=25";
          break;
        case 'staticaddr':
          url = "/netmgmt/export?t=23";        
        default:
          break;
      }

      window.open(url);
    },
    getNewfile() {
      let newfile = this.getFilename(".flieinput");
      $(".styleinput").val(newfile);
    },
    getFilename(ele) {
      let fileName = "";
      if (typeof fileName != "undefined") {
        fileName = $(ele).val().split("\\").pop();
      }
      return fileName;
    },
    importFile() {
      let upfile = document.getElementsByClassName("flieinput")[0].files[0];
      let fd = new FormData();
      fd.append("file", upfile);
      let overwrite = "";
      if ($(".iscover").prop("checked")) {
        this.iscover = true;
        fd.append("overwrite", "");
      } else {
        this.iscover = false;
      }
      this.formData = fd;
      if (!upfile) {
        //隐藏模态狂
        $(".flieinput").popover("show");
        setTimeout(function() {
          $(".flieinput").popover("destroy");
        }, 500);
      } else {
        this.status = "";
        $("#import").modal("show");
      }
    },
    getFileData() {
      this.status = "ing";
      let url = ""
      switch (this.type) {
        case 'hostap':
          url = "/safe/upload?t=6"
          break;
        case 'selfset':
          url = "/safe/upload?t=3"
          break;
        case 'trunk':
          url = "/safe/upload?t=25"
          break;
           case 'staticaddr':
          url = "/safe/upload?t=23"     
        default:
          break;
      }
      $.ajax({
        url: url,
        type: "POST",
        data: this.formData,
        processData: false,
        contentType: false
      }).then((res) => {
        if (res.errcode === 0) {
          this.status = "ok";
          let params = {
            page :1
          };
          $(".styleinput").val("");
          $(".flieinput").val("");
          this.$emit("getData", params);
        } else {
          this.status = "error";
          this.$Message.error({
            closable: true,
            content: this.$t('error_code.' + res.errcode),
            duration: 5
          })
          // this.errorMsg = res.errorMessage;
        }
      });
    },
    changeStatus(status) {
      let params = {
        28: status ? "1" : "0"
      };
      this.show = true;
      defendService.setLetIn(params)
      .then((res) => {
        if (res.errcode === 0) {
          defendService.getLetIn()
          .then((res) => {
            if (res.errcode === 0) {
              this.filter_switch = res['28'] > 0 ? true : false;
            }
          })
        } else {
          this.$Notice.error({ title: "切换失败：" + res.errorMessage })
        }
        this.show = false;
      })
    }
  }
};
</script>
<style scoped>
.flieinput {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 200px;
}

.styleinput {
  background: #f1f1f1;
  border-radius: 2px;
  height: 20px;
  width: 150px;
}

.button {
  height: 20px;
  color: #ffffff;
  border-radius: 2px;
  background: #f5b72e;
  box-sizing: border-box;
  vertical-align: middle;
}

ul {
  border-bottom: 1px dashed #ececec;
  padding: 20px 20px;
}

ul li {
  display: inline-block;
  margin-right: 20px;
}

.bulespan {
  color: #69b6ff;
}

.export,
.import {
  cursor: pointer;
}
span {
  vertical-align: middle;
}
</style>